<template>
	<div class="box">
		<div class="tips">图片大小不超过3M</div>
		<div class="list">
			<div class="img" v-for="(item, index) of show" v-bind:key="index" v-bind:class="{active: show[index]}" v-bind:style="{backgroundImage: 'url(' + img[index] + ')'}">
				<div v-show="img[index] === undefined || img[index] === ''" class="img-border"></div>
				<input :ref="'input' + index" v-show="show[index]" type="file" name="files" @change="uploadHandle(index)" accept="image/png,image/gif,image/jpg,image/jpeg" class="input_file"/>
				<!-- <img v-show="img[index] !== undefined && img[index] !== ''" :src="img[index]" /> -->
				<!--<span v-show="img[index] !== undefined && img[index] !== ''" @click.stop="deleteHandle(index)">×</span>-->
			</div>
		</div>
		<div class="button" v-bind:class="{active: canSubmit}">
			<button @click="uploadSubmit()">确定上传</button>
		</div>
		<div class="mask-box" v-show="maskShow">
			<div class="mask">
				<img src="../../assets/mobile/right.png"/>
				<p>上传完成</p>
			</div>
		</div>
		<div class="view-box" v-show="viewShow" @click="viewShow = false">
			<img :src="viewImg" @click="viewShow = false"/>
		</div>
	</div>
</template>
<style scoped>
	* {
		-webkit-tap-highlight-color: transparent;
	}
	.box {
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100vh;
	}
	.view-box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		line-height: 100vh;
		z-index: 10;
		overflow: auto;
		background: rgba(0, 0, 0, 1);
	}
	.view-box img {
		width: 100%;
		vertical-align: middle;
	}
	.mask-box {
		position: fixed;
		top: 200px;
		left: 0;
		width: 100%;
	}
	.mask {
		width: 150px;
		margin: 0px auto;
		background: rgba(0, 0, 0, .6);
		text-align: center;
		border-radius: 5px;
		padding: 20px 0;
	}
	.mask img {
		width: 24px;
		margin-bottom: 5px;
	}
	.mask p {
		color: #fff;
		margin: 0px;
	}
	.tips {
		padding: 28px 15px;
		color: #606266;
		font-size: 14px;
	}
	.list {
		font-size: 0px;
	}
	.img {
		border-radius: 5px;
		width: 100px;
		height: 100px;
		display: inline-block;
		margin: 0 calc((100% - 300px) / 6) 10px;
		background-size: cover;
		background-repeat: no-repeat;
		vertical-align: top;
		position: relative;
	}
	.img-border {
		width: 100px;
		height: 100px;
		background-image: url('../../assets/mobile/photo-none.png');
		background-size: 100%;
		background-repeat: no-repeat;
	}
	.img span {
		position: absolute;
		top: 5px;
		right: 5px;
		display: block;
		width: 16px;
		height: 16px;
		line-height: 16px;
		text-align: center;
		background-color: #fff;
		color: #9a9a9a;
		z-index: 10;
		font-size: 16px;
		border-radius: 50%;
	}
	.img.active .img-border {
		background-image: url('../../assets/mobile/photo.png');
	}
	.img img{
		width: 100px;
		height: 100px;
		border: 0;
		border-radius: 5px;
		font-size: 10px;
	}
	.input_file {
		width: 100px;
		height: 100px;
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
	}
	.button {
		position: absolute;
		bottom: 100px;
		width: 100%;
		text-align: center;
	}
	.button button {
		background-color: #dcdfe6;
		color: #fff;
		font-size: 14px;
		border: none;
		width: 90%;
		height: 40px;
		border-radius: 5px;
	}
	.button.active button {
		background-color: #409eff;
	}
</style>

<script>
	import EXIF from 'exif-js'
	import {uploadMobileImg} from '@/api/task'
	export default {
		created () {
			/* getMobileImg({sign: this.sign, id: this.id}).then((response) => {
				var num = response.data.files_name.length // 查看已传几张图片
				if (num > 0 && num < 5) {
					this.length = this.length - num
					this.show.splice(-num)
				} else if (num === 0) {

				} else {
					this.length = 0
					this.show = []
				}
			}) */
		},
		data () {
			return {
				maskShow: false,
				viewShow: false,
				viewImg: '',
				show: [true],
				img: [],
				sign: this.$route.query.sign,
				id: this.$route.query.id,
				canSubmit: false,
				length: 5 // 一共多少个元素，默认是5个
			}
		},
		methods: {
			showImg (index) {
				if (this.img[index] !== undefined && this.img[index] !== '') {
					this.viewShow = true
					this.viewImg = this.img[index]
				}
			},
			uploadSubmit () { // 上传提交
				if (this.canSubmit) {
					this.canSubmit = false
					uploadMobileImg({file: this.img, sign: this.sign, id: this.id}).then((response) => {
						this.maskShow = true
						setTimeout(() => {
							this.maskShow = false
							window.opener = null
							window.location.reload()
						}, 2000)
					}).catch(() => {
						if (this.show[0] === false) {
							this.canSubmit = true
						}
					})
				}
			},
			uploadHandle (id) {
				var file = this.$refs['input' + id][0].files[0]
				if (file.size <= 1024 * 1024 * 3) {
					var reader = new FileReader()
					var obj = this
					reader.onload = (event) => {
						EXIF.getData(file, function () {
							// 获取旋转度
							var or = EXIF.getTag(this, 'Orientation')
							// 绘制画布
							var canvas = document.createElement('canvas')
							var ctx = canvas.getContext('2d')
							var image = new Image()
							image.src = event.target.result
							image.onload = function () {
								var cw, ch, w, h
								if (or === 6) {
									cw = image.height
									ch = image.width
									w = image.height
									h = image.width
								} else {
									cw = image.width
									ch = image.height
									w = image.width
									h = image.height
								}
								canvas.width = w
								canvas.height = h
								if (cw > 1000 && cw > ch) {
									w = 1000
									h = (1000 * ch) / cw
									canvas.width = w
									canvas.height = h
								}
								if (ch > 1000 && ch > cw) {
									h = 1000
									w = (1000 * cw) / ch
									canvas.width = w
									canvas.height = h
								}
								if (or === 6) {
									ctx.save()
									ctx.translate(w / 2, h / 2)
									ctx.rotate(90 * Math.PI / 180)
									ctx.drawImage(image, 0 - h / 2, 0 - w / 2, h, w)
									ctx.restore()
								} else {
									ctx.drawImage(image, 0, 0, w, h)
								}
								var im = canvas.toDataURL('image/jpeg', 1)
								obj.img = []
								obj.img.push(im)
							}
						})
					}
					reader.readAsDataURL(file)
					/* this.show[id] = false
					 if (id + 1 < this.length) {
					 this.show[id + 1] = true
					 } */
					this.canSubmit = true
				} else {
				    alert('图片大小不超过3M')
				}
			},
			deleteHandle (id) {
				// 清除input值
				var file = this.$refs['input' + id][0]
				file.value = ''
				this.img.splice(id, 1)
				for (const k in this.show) {
					if (this.show[k] === true) {
						if (k !== 0) {
							this.show[k] = false
							this.show[k - 1] = true
							break
						}
					}
				}
				if (this.show[0] === true) {
					this.canSubmit = false
				}
			}
		}
	}
</script>
